<template>
	<div class="system-menu-container">
		<div class="breadcrumb-box">
			<Breadcrumb />
		</div>

		<div class="header-search">
			<el-input class="search-item" placeholder="请输入用户名称" v-model="state.apiData.search" size="default"
				style="width: 220px;" clearable >
			</el-input>
			<el-select v-model="state.apiData.departmentId" placeholder="请选择科室" size="default" clearable filterable style="width:200px;margin-right: 20px;">
				<el-option v-for="(item, index) in state.departmentList" :key="index" :label="item.departmentName"
					:value="item.id"></el-option>
			</el-select>
			<el-button size="default"  type="primary" @click="searchChange()">查询</el-button>


		</div>

		<div class="page-main" v-loading="state.tableData.loading" ref="pageMain">
			<el-card shadow="hover" style="height:100%;">

				<el-table :data="state.tableData.data" border style="width: 100%" :height="state.tableHeight"
					ref="multipleTableRef">
					<el-table-column label="序号" type="index" width="100" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="jobNo" label="工号" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="name" label="姓名" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="phone" label="电话" width="120" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.phone? scope.row.phone:'-' }}
						</template>
					</el-table-column>
					<el-table-column label="email" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.email ? scope.row.email : '-' }}
						</template>
					</el-table-column>
			
					<el-table-column prop="department.departmentName" label="科室" show-overflow-tooltip
						align="center" width="200">
						<template #default="scope">
							{{ scope.row.departmentStr }}
						</template>
					</el-table-column>
					<el-table-column prop="jobPosition.jobPositionNo" label="职称代码" show-overflow-tooltip
						align="center">
						<template #default="scope">
							{{ scope.row.jobPosition? scope.row.jobPosition.jobPositionName:'-' }}
						</template>
					</el-table-column>
					<el-table-column prop="jobPosition.jobPositionName" label="职称名称" show-overflow-tooltip
						align="center">
						<template #default="scope">
							{{ scope.row.jobPosition? scope.row.jobPosition.jobPositionName:'-' }}
						</template>
					</el-table-column>
					<el-table-column label="角色" width="200" align="center">
						<template #default="scope">
							{{ scope.row.jobStr  }}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="150" fixed="right" align="center">
						<template #default="scope">
							<el-button size="small" link type="primary" @click="editRole(scope.row)">修改角色</el-button>
						</template>
					</el-table-column>
				</el-table>


				<div class="pagination-box">
					<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
						:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.apiData.page" background
						v-model:page-size="state.apiData.pageSize" layout="total, sizes, prev, pager, next, jumper"
						:total="state.tableData.total">
					</el-pagination>
				</div>

			</el-card>
		</div>

		<RoleDialog ref="roleDialogRef" @refresh="getList()" />
	</div>
</template>

<script setup name="system-role">
import { getCurrentInstance } from 'vue';
import { systemApi } from '/@/api/system/index';
import { toolsApi } from '/@/api/tools'

const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));

// 定义变量内容
const roleDialogRef = ref()
const state = reactive({
	apiData: {
		page: 1,
		pageSize: 10,
		search: '',
		departmentId: ''
	},
	tableData: {
		data: [],
		loading: false,
		total: 0
	},
	tableHeight: '30vh',
});

// 页面加载时
onMounted(() => {
	getList()
	getDepatment()
	state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight - 130 - 52 + "px";
});

const searchChange = () => {
	state.apiData.page = 1
	getList()
}









// 分页改变
const onHandleSizeChange = (val) => {
	state.apiData.pageSize = val;
	getList();
};
const onHandleCurrentChange = (val) => {
	state.apiData.page = val;
	getList();
};







// 获取列表
const getList = () => {
	state.tableData.loading = true
	systemApi().systemUserList(state.apiData).then(res => {
		state.tableData.loading = false
		res.data.items.forEach(item => {
			const jobList = []
			item.role.forEach(it=>{
				jobList.push(it.name)
			})
			item.jobStr = jobList.length?jobList.join(',') :'-'

			const departmentNameList = []
			item.department.forEach(it =>{
				departmentNameList.push(it.departmentName + '('+ it.departmentNo + ')')
			})
			item.departmentStr = departmentNameList.length?departmentNameList.join(','):'-'
		});
		state.tableData.data = res.data.items
		state.tableData.total = res.data.total
	}).catch(() => {
		state.tableData.loading = false
	})

}

const editRole = (row) => {
	roleDialogRef.value.openDialog(row);
}

// 获取科室
const getDepatment = () => {
  toolsApi().departmentList({ all: 1 }).then(res => {
    state.departmentList = res.data
  })
}


</script>

<style lang="scss" scoped>
.page-main {
	height: calc(100vh - 50px - 106px);
}
</style>
